<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点赞特效</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .thums-up {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .heart {
            display: inline-flex;
            position: relative;
            height: 20px;
        }
        .heart svg {
            stroke: #9a9daa;
            stroke-width: 60px;
            transition: fill 0.3s, stroke 0.3s;
            fill: transparent;
        }
        .thums-up:hover .heart svg {
            stroke: #e05b5b;
        }
        .thums-up-text {
            margin-left: 5px;
            font-size: 13px;
            user-select: none;
        }
        .particle {
            position: absolute;
            border-radius: 50%;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
</head>
<body>

<h3>点赞页面</h3>
<div class="thums-up" id="thumbsUp">
    <div class="heart" id="heart">
        <svg viewBox="0 0 1024 1024" width="20" height="20">
            <path d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"></path>
        </svg>
    </div>
    <div class="thums-up-text"><span>点赞</span></div>
</div>

<script>
    const thumbsUp = document.getElementById('thumbsUp');
    const heart = document.getElementById('heart');
    let hearted = false;

    thumbsUp.addEventListener('click', () => {
        if (!hearted) {
            hearted = true;

            // 心跳动画
            gsap.fromTo(heart, {
                scale: 1,
            }, {
                scale: 1.2,
                duration: 0.3,
                yoyo: true,
                repeat: 1,
                ease: "elastic.out(1, 0.3)",
            });

            // 爆炸效果
            for (let i = 0; i < 10; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                document.body.appendChild(particle);

                const angle = Math.random() * 2 * Math.PI;
                const distance = Math.random() * 50 + 20; // 随机距离
                const x = Math.cos(angle) * distance;
                const y = Math.sin(angle) * distance;

                gsap.set(particle, {
                    x: heart.getBoundingClientRect().left + heart.offsetWidth / 2,
                    y: heart.getBoundingClientRect().top + heart.offsetHeight / 2,
                    backgroundColor: `hsl(${Math.random() * 360}, 100%, 50%)`,
                    position: 'absolute',
                    width: '10px',
                    height: '10px',
                    opacity: 1,
                });

                gsap.to(particle, {
                    x: `+=${x}`,
                    y: `+=${y}`,
                    opacity: 0,
                    duration: 0.75,
                    ease: "power2.out",
                    onComplete: () => {
                        particle.remove();
                    }
                });
            }
        } else {
            hearted = false;
        }
    });
</script>

</body>
</html>
